<template>
  <view class="container">
    <!-- 用户头像和昵称 -->
    <view class="userinfo">
      <!-- 头像 -->
      <view class="pic">
        <image :src="userinfo.avatarUrl" mode="aspectFit"></image>
      </view>
      <view class="nickname">
        {{ userinfo.nickName }}
      </view>
    </view>
    <!-- 工具栏 -->
    <view class="utils">
      <ul>
        <li>
          <view class="num">
            7
          </view>
          <view class="text">
            收藏的店铺
          </view>
        </li>
        <li>
          <view class="num">
            7
          </view>
          <view class="text">
            收藏的店铺
          </view>
        </li>
        <li>
          <view class="num">
            7
          </view>
          <view class="text">
            收藏的店铺
          </view>
        </li>
        <li>
          <view class="num">
            7
          </view>
          <view class="text">
            收藏的店铺
          </view>
        </li>
      </ul>
    </view>
    <view class="pannel-order">
      <view class="text">
        我的订单
      </view>
<view class="pic">
  <view class="pic-icon">
    <image src="../../static/my-icons/icon1.png" mode=""></image>
    <view class="icon-text">
      待付款
    </view>
  </view>
  <view class="pic-icon">
    <image src="../../static/my-icons/icon2.png" mode=""></image>
    <view class="icon-text">
      待收货
    </view>
  </view>
  <view class="pic-icon">
    <image src="../../static/my-icons/icon3.png" mode=""></image>
    <view class="icon-text">
      退款/退货
    </view>
  </view>
  <view class="pic-icon">
    <image src="../../static/my-icons/icon4.png" mode=""></image>
    <view class="icon-text">
      全部订单
    </view>
  </view>
</view>
    </view>
<!-- 第三个面板 -->
  <view class="pannel-three">
    <view class="pannel">
      <view class="title">
        收货地址
      </view>
      <uni-icons type="forward"></uni-icons>
    </view>
    <view class="pannel">
      <view class="title">
        联系客服
      </view>
      <uni-icons type="forward"></uni-icons>
    </view>
    <view class="pannel" @click="logout">
      <view class="title">
        退出登录
      </view>
      <uni-icons type="forward"></uni-icons>
    </view>
  </view>
  
  </view>
</template>

<script>
  import { mapState,mapMutations } from 'vuex'
  export default {
    name:"my-userinfo",
    data() {
      return {
        
      };
    },
    computed:{
      ...mapState('user',['userinfo'])
    },
    methods:{
      ...mapMutations('user',['UPDATEADDRESS','UPDATEUSERINFO','UPDATETOKEN']),
     async logout() {
        const [err,succ] = await uni.showModal({
          title:'提示',
          content:'确认退出登录吗？'
        }).catch(err =>err)
        
        if(succ && succ.confirm) {
          // 点击了退出
          this.UPDATETOKEN('')
          this.UPDATEUSERINFO({})
          this.UPDATEADDRESS({})
        }
      }
    }
  }
</script>

<style lang="less">
  .container {
    background-color: #f3f3f3;
    height: 100vh;
  }
.userinfo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #C00000;
  height: 220px;
  .pic {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 2px solid #fff;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
    .nickname {
      margin: 20rpx 0;
      color: #fff;
    }
}
.utils {
  width: 95%;
  height: 60px;
  margin: -30rpx  auto;
  padding-top: 20rpx;
  background-color: #fff;
  border-radius: 5px;
  ul {
    display: flex;
    justify-content: space-around;
    li {
      text-align: center;
    }
  }
}
.pannel-order {
  width: 95%;
  height: 220rpx;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 40rpx;
  padding-top: 10rpx;
  .text {
    margin: 0 0 0 10rpx;
  }
  .pic {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30rpx;
    font-size: 14px;
    text-align: center;
    .pic-icon {
      width: 70px;
      height: 50px;
      image {
        width: 40px;
        height: 40px;
      }
    }
  }
}
.pannel-three {
  margin-top: 20rpx;
  .pannel {
    // border-bottom: 1px solid #f3f3f3;
  margin: 0 auto ;
    width: 95%;
    height: 90rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 14px;
  }
}
</style>